import React, { useState, useEffect } from 'react';
import * as service from '../../../api/zynindex'
import "../../../views/Assets/SetUp/SetUp.scss"
import { useNavigate } from 'react-router-dom'
import { LaptopOutlined, NotificationOutlined, UserOutlined, AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { Layout, theme, Button, Space, Table, notification, Switch, Checkbox } from 'antd';
// import { CheckOutlined, CloseOutlined } from '@ant-design/icons';

const { Content } = Layout;



interface Props {

}

function SetUp(props: Props) {
  var navigate = useNavigate()
  var [tableData, setTableData] = useState([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },

  ])
  var [placeData, setPlaceData] = useState([])
 
  const columns:any = [
    {
      title: '业务表单',
      dataIndex: 'work',
      align: 'center',
      key: 'work',
      render: (_: any, record: any) => <a>{record.name}</a>,
    },
    {
      title: '员工端是否启用',
      dataIndex: 'use',
      align: 'center',
      key: 'use',
      render: (_: any, record: any) => {
        return <>
          <Switch checkedChildren="开启" defaultChecked />
        </>
      },//动态渲染标签/组件
    },
    {
      title: '允许员工申请资产类型',
      dataIndex: 'type',
      align: 'center',
      key: 'type',
      render: (_: any, record: any) => <a>全部类别</a>,
    },
    {
      title: '审批流程',
      dataIndex: 'text',
      align: 'center',
      key: 'text',
      render: (_: any, record: any) => {
        return <>
          <Switch checkedChildren="开启" defaultChecked />
        </>
      },//动态渲染标签/组件
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      key: 'action',
      render: (_: any, record: any) => <a>配置审批表单</a>,
    },
  ];
  const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
    (icon, index) => {
      const key = String(index + 1);
      return {
        key: `sub${key}`,
        icon: React.createElement(icon),
        label: `subnav ${key}`,

        children: new Array(4).fill(null).map((_, j) => {
          const subKey: any = index * 4 + j + 1;
          return {
            key: subKey,
            label: `option${subKey}`,
          };
        }),
      };
    },
  );
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  // 复选框
  const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };

  // 发起请求,允许员工可查看的资产信息
  var setting = async () => {
    var res = await service.setting()
    // console.log(res.data);
    setPlaceData(res.data)
  }
  useEffect(() => {
    setting();
  }, [])

  // 员工端业务表单
  var settingform = async () => {
    var res = await service.setting_form()
    console.log(res.data);
    setTableData(res.data)
  }
  useEffect(() => {
    settingform();
  }, [])
  return (
    <div className='setup'>
      <Content
        style={{
          padding: 24,
          margin: 0,
          minHeight: 280,
          background: colorBgContainer,
        }}
      >
        <div className="shang">
          <div className="line"> </div>
          <div className="set">设置</div>
        </div>
        <div className="t1">员工端业务表单设置</div>
        <div className="bottom-one">
          <Table dataSource={tableData} columns={columns} />
        </div>
        <div className="t1">资产信息设置</div>
        <div className="text">允许员工端查看的资产信息</div>
        {/* <Checkbox onChange={onChange} className='checkbox'>{item.name}</Checkbox> */}
        {
            placeData.map((item:any,index)=>{
              return(
                  <Checkbox onChange={onChange} className='checkbox' key={index}>{item.name}</Checkbox> 
              )
            })
        }
        <div className="t2">通知设置</div>
        <div className="jie">
          <div className="text1">借用归还通知</div>
          <Switch checkedChildren="开启" defaultChecked />
        </div>
        <div className="little-box">
          <div className='t3'>接收方式</div>
          <Checkbox onChange={onChange} className='check'>App通知</Checkbox>
          <Checkbox onChange={onChange} className='check'>短信</Checkbox>
        </div>

        <div className="btn">
          <Button type="primary">保存</Button>
        </div>
      </Content>

    </div>
  );
}

export default SetUp;